import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    navs: [],
    selIndex: 0,
    money:0,
    cart: JSON.parse(localStorage.getItem('carts')) || [],//保存到本地carts数组中
    allSelected: JSON.parse(localStorage.getItem('allSelected')) || false,//全选状态 添加至本地存储
  },
  mutations: {
    //获取数组中数据
    getdata(state, item) {
      state.navs = [...item];
    },
    getselIndex(state, index) {
      state.selIndex = index;
    },
    //加入购物车并保存到本地
    addcarts(state, items) {
      var flag = false;//判断保存到本地商品中是否已有商品
      //通过商品的id  判断商品是否已经存在 
      state.cart.map((item) => {
        if (item.carts.id == items.id) {
          console.log(items);
          flag = true;
          item.num++;
        }
      })
      //
      if (!flag) {
        state.cart.push({
          carts: items,
          num: 1,
          checked: false,
        })
      }

      state.money = 0;
      state.cart.map(res => {
        if (res.checked == true) {
          state.money += res.carts.price * res.num;
        }
      })

      localStorage.setItem('carts', JSON.stringify(state.cart));
      

    },

    //点击购物车实现商品加减
    onChange(state) {
      localStorage.setItem('carts', JSON.stringify(state.cart));
      state.money = 0;
      state.cart.map(res => {
        if (res.checked == true) {
          state.money += res.carts.price * res.num;
        }
      })
    },

    //点击复选框  实现价格的变化
    OnCheckBox(state,item) {
      state.money = 0;
      state.cart.map(res => {
        // console.log(res);
        if (res.checked == true) {
          state.money += res.carts.price * res.num;
        }
      })

      //点击商品前面的复选框实现与全选同步
      if (state.cart.every(ele => {
        return ele.checked;
      })){
        state.allSelected = true;
      }else {
        state.allSelected = false;
      }

      localStorage.setItem('carts', JSON.stringify(state.cart));
      localStorage.setItem('allSelected',JSON.stringify(state.allSelected))
    },


    //点击全选复选框
    onAllChecked(state,boolean) {
      state.allSelected = boolean;
      state.cart.map(ele => {
        ele.checked = boolean;
      })

      state.money = 0;
      state.cart.map(res => {
        if (res.checked == true) {
          state.money += res.carts.price * res.num;
        }
      })

      localStorage.setItem('carts', JSON.stringify(state.cart));
      localStorage.setItem('allSelected',JSON.stringify(state.allSelected))
    },

    //删除
    del(state,index) {
      state.cart.splice(index,1);

      state.money = 0;
      state.cart.map(res => {
        console.log(res);
        if (res.checked == true) {
          state.money += res.carts.price * res.num;
        }
      })

      localStorage.setItem('carts', JSON.stringify(state.cart));
    }

  },
  actions: {
    getdata(context) {
      axios.get("http://localhost:8080/goods.json")
        .then(res => {
          // console.log(res.data.data);
          context.commit('getdata', res.data.data)
        })
    },
    getselIndex(context, index) {
      context.commit('getselIndex', index)
    },
    addcarts(context, items) {
      context.commit('addcarts', items)
    },
    onChange(context) {
      context.commit('onChange')
    },
    OnCheckBox(context,item) {
      context.commit('OnCheckBox',item);
    },
    onAllChecked(context,boolean) {
      context.commit('onAllChecked',boolean);
    },
    del(context,index) {
      context.commit('del',index);
    }
  },
  modules: {
  }
})
